<script setup>
import AsideForMessage from '@/views/LeftSetBar/message/AsideForMessage.vue'
import AsideForContactList from '@/views/LeftSetBar/contact/AsideForContacts.vue'
import AsideForSet from '@/views/LeftSetBar/set/AsideForSet.vue'
import AsideForMail from '@/views/LeftSetBar/email/AsideForMail.vue'
import MainPageHeader from '@/views/MainPage/mainPageHeader/MainPageHeader.vue'
import MainPageFooter from '@/views/MainPage/mainPageFooter/MainPageFooter.vue'
import MainPageChat from '@/views/MainPage/mainPageChat/MainPageChat.vue'
import AddUserGroup from '@/views/AddUserGroup/AddUserGroup.vue'
import LeftSetBar from '@/views/LeftSetBar/LeftSetBar.vue'
import { ref,onBeforeMount } from 'vue'
import { useSetStore } from '@/stores/useSetStore.js'

const setStore = useSetStore()
const isSet = ref(0)

/**
 * 登录检查，没有token重定向到登录页面
 */
onBeforeMount(() => {
    const token = localStorage.getItem('token')
    if (!token) {
        window.location.href = '/login'
    }else{
        isSet.value = 1
    }
})

</script>

<template>
    <div class="common-layout" v-if="isSet === 1">
        <AddUserGroup v-if="setStore.isAddGroup" />
        <LeftSetBar />
        <el-container>
            <!-- 顶部导航栏 -->
            <el-header class="header">
                <MainPageHeader />
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside class="aside">
                    <AsideForMessage v-if="setStore.isSet === 0" />
                    <AsideForMail v-if="setStore.isSet === 1" />
                    <AsideForContactList v-if="setStore.isSet === 2" />
                    <AsideForSet v-if="setStore.isSet === 3" />
                </el-aside>
                <el-container>
                    <!-- 主要内容 -->
                    <el-main class="chat">
                        <MainPageChat />
                    </el-main>
                    <!-- 底部 -->
                    <el-footer class="footer">
                        <MainPageFooter />
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped>
/* 整体高度铺满屏幕 */
.common-layout {
    height: 100vh;
    display: flex;
    top: 0px;
    left: 0px;
  overflow: hidden;
}

/* 顶部导航栏 */
.header {
    border-bottom: 1px solid var(--el-border-color);
    height: 60px;
    padding: 0;
}

/* 侧边栏 */
.aside {
    border-right: 1px solid var(--el-border-color);
    width: 300px;
    height: calc(100vh - 60px); /* 减去 header 高度 */
}

/* 主体内容 */
.chat {
    height: calc(100vh - 520px); /* 减去 header 和 footer 高度 */
    padding: 0;
}

/* 底部 */
.footer {
    border-top: 1px solid var(--el-border-color);
    height: 220px;
    padding: 0;
}
</style>
